<template>

<div>

  <el-dialog title="品牌编辑" :visible.sync="dialogFormVisible">
    <el-form ref="form" :model="map" label-width="80px">
      <el-form-item label="品牌名称">
        <el-input v-model="map.name" aria-placeholder="品牌名称"></el-input>
      </el-form-item>
      <el-form-item label="首字母" aria-placeholder="首字母">
        <el-input v-model="map.firstChar"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="onSubmit()">立即创建</el-button>
        <el-button type="warning" @click="$router.back(-1)" round>返回</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <h1>品牌管理</h1>
  <el-button type="primary" @click="addBrand()">新建</el-button>
  <el-button type="primary">删除</el-button>
  <el-button type="primary">刷新</el-button>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="150">
    </el-table-column>
    <el-table-column
      label="品牌ID"
      width="350">
      <template slot-scope="scope">{{ scope.row.id }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="品牌名称"
      width="350">
    </el-table-column>
    <el-table-column
      prop="firstChar"
      label="品牌首字母"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="350">
      <template slot-scope="scope">
        <el-button @click="updateBrand(scope.row)" type="text" size="small">修改</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div style="margin-top: 20px">
    <!--<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>-->
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div>



</div>
</template>



<script>
    export default {
        name: "BrandList",
      data(){
          return{
            dialogFormVisible: false,
            tableData:[],
            map:{},
            dialogVisible: false
          }
      },methods:{
        //提交
        onSubmit:function () { //保存 提交
          this.$http.post("/shop/addBrand",this.map).then((res)=>{
            console.log(res)
            if (res.data){
                alert("success")
              location.reload();
            }else{
              alert("error");
            }
          });
        },
        //跳转到添加的页面
        addBrand(){
          this.dialogFormVisible=true;
        },
        //跳转到修改的页面
        updateBrand:function(data){
            this.map = data;
            this.dialogFormVisible=true
        },
        //多选按钮
        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            this.$refs.multipleTable.clearSelection();
          }
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        //查询品牌列表 全部
        findBrand(){
          this.$http.get("/shop/findAll",this.map).then((res)=>{
            console.log(res);
            this.tableData=res.data;
          })
        }
      },
      mounted(){
          //console.log(location.href.id)
        this.findBrand();


        var id=this.$route.params.id;

        console.log(id);
        if (id!=undefined){
          debugger
          this.$http.get("/shop/getId/"+id).then((res)=>{
            console.log(res)
            if (res.data){
              this.map=res.data;
            }else{
              alert("error");
            }
          });
        }
      }
    }
</script>

<style scoped>

</style>
